<template>
  <Card>
    <el-form inline style="margin-top: 15px">
      <el-form-item>
        <el-input placeholder="昵称/手机" style="width: 200px; height: 40px" :span="5" v-model="userName" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker :span="10" style="width: 400px; height: 40px" v-model="startEnd"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss" :picker-options="{ disabledDate }"> </el-date-picker>
      </el-form-item>
      <el-button type="primary" :icon="Search" style="margin: -20px 0 0 0" size="large" @click="searchUser">查询</el-button>
      <el-button type="primary" plain style="margin: -20px 0 0 10px" size="large" @click="handler(1, 10)">清空</el-button>
      <!-- 表格 -->
      <el-table row-key="id" :data="userInfoList" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="phoneNum" label="手机号" width="150" />
        <el-table-column prop="nickName" label="昵称" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column label="状态" width="180">
          <template #default="scope">
            {{ scope.row?.status == 1 ? "正常" : "锁定" }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="address" label="操作">
          <template #default="{ row, $index }">
            <el-button type="primary" @click="close(row.id, 0)" v-if="row.status">锁定</el-button>
            <el-button type="danger" @click="close(row.id, 1)" v-else>取消锁定</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination style="margin: 30px 0 0 200px" v-model:currentPage="current" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background" layout="sizes, prev, pager, next, jumper, ->, total, " :total="total" @size-change="(val) => getUserInfo(current, val)" @current-change="(val) => getUserInfo(val)" />
    </el-form>
  </Card>
</template>

<script lang="ts">
export default {
  name: "User",
};
</script>
<script lang="ts" setup>
// 引入定义组件的api
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted,watch } from "vue";
//引入数据类型
import type { UserInfo, UserInfoList } from "@/api/model/userModel";
//引入请求函数
import { reqGetUserInfo, reqChangClose } from "@/api/user";
import { ElMessage, ElMessageBox } from "element-plus";

//当前页码
const current = ref<number>(1);
//每页条数
const pageSize = ref<number>(10);
//总页数
const total = ref<number>(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
//定义输入框中的内容
const userName = ref<string>("");

//定义每个用户信息
const userInfo = reactive<UserInfo>({
  id: 0,
  loginName: "",
  nickName: "",
  name: "",
  phoneNum: "",
  status: 1, //1标识状态正常
  createTime: "",
});
//定义存储用户信息的数组
const userInfoList = ref<UserInfoList>([]);

const startEnd = ref<any>({}); // 开始结束时间
//禁用当天之后的时间选择, 返回true是禁用
const disabledDate = (time: any) => {
  return time.getTime() > Date.now();
};

//点击锁定按钮的回调
const close = (id: number, status: number) => {
  //弹出遮罩层
  ElMessageBox.confirm("确定该操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let result = await reqChangClose(id, status);
    getUserInfo();
    ElMessage({
      //点击确定的回调
      type: "success",
      message: "操作成功",
    });
  });
};

// 搜索
const searchUser = () => {
    getUserInfo();
};

//组件挂载完毕获取数据
onMounted(() => {
  getUserInfo();
});

//定义获取用户信息的函数
const getUserInfo = async (page: number = current.value, limit: number = pageSize.value, keyword:string = userName.value) => {
  let result = await reqGetUserInfo(page, limit, keyword);
  //修改总条数
  total.value = result.total;
  //修改用户信息的数组
  userInfoList.value = result.records;
};
//点击清空按钮
const handler = (page: number = current.value, limit: number = pageSize.value, keyword:string = '') => {
  getUserInfo(page, limit,keyword);
  current.value = page;
  pageSize.value = limit;
  userName.value=''
};

</script>

<style scoped lang="less">
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
</style>
